<!-- 文章 -->
<template>
    <Banner 
    :bannerH="35"
    :typewriterShow="true"
    :animationTime="5"
    :animationSteps="8"
    :text="routerTitle"
    :bannerSrc="bannerSrc"
    v-if="forceRerender"
    ></Banner>
    <!-- 菜单导航 -->
    <Menu v-if="forceRerender"></Menu>
    <div class="main-container">
        <router-view></router-view>
    </div>
    <Footer></Footer>
</template>

<script setup>
import Menu from '@/layout/components/menu/index-menu.vue';
import Banner from '@/layout/components/banner/banner.vue';
import Footer from '@/layout/components/footer/footer.vue';
import { useRouter } from 'vue-router';
import { articleStore } from '@/store/article/article';
import { isEmptyObject } from '@/utils/tools-util';

const router = useRouter();
// ========================= 组件挂载前 =========================
const routerTitle = ref('');
onBeforeMount(() => {
    routerTitle.value = router.currentRoute.value.meta.title;
});

// ========================= 计算属性 =========================
const articleDetail = computed(() => articleStore().currentArticle);

// ========================= 监听 =========================
// 监听文章数据
let bannerSrc = ref('');
watch(() => articleDetail, (newValue)=>{
    !isEmptyObject(newValue.value) ? 
    bannerSrc.value = newValue.value.articleCover :
    bannerSrc.value = '';
}, { deep: true })

// ========================= 路由更新之前 =========================
// 重新加载，从而渲染动画
let forceRerender = ref(true);
onBeforeRouteUpdate((to, from) => {
    routerTitle.value = to.meta.title;
    // 动画完成的回调
    setTimeout(() => {
        forceRerender.value = false;
        nextTick(() => {
            forceRerender.value = true;
        });
    }, 0);
});
</script>

<style scoped lang="scss">
@import '@/theme/public.scss';
@import '@/theme/animations.scss';
.main-container{
    max-width: 1200px;
    min-height: 100vh;
    margin: auto;
    display: block;
    margin-top: $article-margin-top;
    position: relative;
}
</style>